<template>
    <div class="w-full h-full flex">
        <div class="w-50% flex-center" style="border-right: solid 1px #e5e5e5">
            <img src="/src/assets/computer.svg" class="w-60% h-60%"/>
        </div>
        <div class="w-50% flex justify-center items-center">
            <div class="w-50% h-70% flex flex-col justify-center select-none">
                <div>
                    <h2 class="text-2xl font-bold text-dark my-10px">欢迎回来</h2>
                    <p class="text-gray-500">请登录您的账号，继续您的分享</p>
                </div>
                <n-form
                    ref="form"
                    class="my-30px flex flex-col gap-16px"
                    label-placement="left"
                    :show-feedback="false"
                >
                    <!-- 用户名/邮箱 -->
                    <n-form-item label="账号" path="username">
                        <n-input
                            v-model:value="loginForm.account"
                            placeholder="请输入账号"
                            class="w-full"
                        />
                    </n-form-item>

                    <!-- 密码 -->
                    <n-form-item label="密码" path="password">
                        <n-input
                            v-model:value="loginForm.password"
                            type="password"
                            placeholder="请输入密码"
                            class="w-full"
                        />
                    </n-form-item>

                    <!-- 记住密码和忘记密码 -->
                    <div class="flex justify-between items-center">
                        <n-checkbox class="text-sm"> 记住我 </n-checkbox>
                        <n-a class="text-primary text-sm hover:underline transition-custom">
                            忘记密码？
                        </n-a>
                    </div>

                    <!-- 登录按钮 -->
                    <n-button
                        type="primary"
                        class="w-full text-white h-11 rounded-lg text-base"
                        @click="handleLogin"
                    >
                        登录
                    </n-button>
                    <!-- 注册链接 -->
                    <div class="text-center text-gray-500 text-sm">
                        还没有账号？
                        <n-a
                            class="text-primary hover:underline ml-1 transition-custom"
                            @click="handleRegister"
                        >
                            立即注册
                        </n-a>
                    </div>
                </n-form>

                <!-- 其他登录方式 -->
                <div>
                    <div class="flex items-center my-4">
                        <div class="flex-1 h-px bg-gray-200"></div>
                        <span class="px-3 text-gray-500 text-sm">其他登录方式</span>
                        <div class="flex-1 h-px bg-gray-200"></div>
                    </div>

                    <div class="flex justify-center space-x-6">
                        <n-button circle size="large" :focusable="false" @click="doudouNiDe">
                            <template #icon>
                                <XIcon name="wechat"></XIcon>
                            </template>
                        </n-button>
                        <n-button circle size="large" :focusable="false" @click="doudouNiDe">
                            <template #icon>
                                <XIcon name="twitter"></XIcon>
                            </template>
                        </n-button>
                        <n-button circle size="large" :focusable="false" @click="doudouNiDe">
                            <template #icon>
                                <XIcon name="github"></XIcon>
                            </template>
                        </n-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import { login } from '@/service/api/user'

import XIcon from '@/components/xicon/index.vue'

const route = useRoute()
const router = useRouter()

const handleRegister = () => {
    router.push({ path: '/login/register' })
}

const loginForm = ref({
    account: '',
    password: '',
})

const handleLogin = async () => {
    if (!loginForm.value.account || !loginForm.value.password) {
        window.NMessage.warning('请输入账号和密码')
        return
    }
    try {
        const res = await login(loginForm.value)
        const { token, user } = res
        localStorage.setItem('token', token)
        localStorage.setItem('user', JSON.stringify(user))
        router.push({ path: '/' })
    } catch (err: any) {
        console.log(err)
        window.NMessage.error(err.msg)
    }
}

const doudouNiDe = () => {
    window.NMessage.info('逗逗你的')
}
</script>

<style scoped></style>
